<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">物品发放</block>
		</cu-custom>

		<view class="tabitems" :style="style">
			<view class="items" @click="changTab(index)" :class="[tabIndex==index?'changColor':'']" v-for="(item,index) in tabList"
			 :key="index">
				{{item}}
			</view>
		</view>
		<!-- :style="style" -->
		<view style="height:80rpx;">
		</view>
		<view v-if="tabIndex==0">
			<view v-if="isHave">
				<block v-for="(item,index) in readyList" :key="index">
					<view class="ready">
						<!--left -->
						<view class="ready-img">
							<image :src="src1" mode="scaleToFill"></image>
						</view>
						<!-- right -->
						<view class="ready-right">
							<!-- center -->
							<view class="ready-content">
								<view class="f16">
									{{item.goodsName}}
								</view>
								<view class="mt10">
									<text>待发数量：</text>
									<text>{{item.sendNum}}</text>
								</view>
								<view class="mt10">
									<text>物品来源：</text>
									<text>{{item.goodsKindName}}</text>
								</view>
								<view class="mt10">
									<text>领取时间：</text>
									<text>{{item.recTime}}</text>
								</view>
							</view>
							<view class="ready-button">
								<view class="inner" @click="confirm(item) ">确认发放</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view v-if="!isHave">
				<view class="no-data">暂无数据</view>
			</view>
		</view>
		<view v-if="tabIndex==1">
			<view v-if="isHaves">
				<block v-for="(item,index) in issuedList" :key="index">
					<view class="ready" @click="goDetail(item)">
						<!--left -->
						<view class="ready-img">
							<!-- wupinfafang -->
							<image :src="src2" mode=""></image>
						</view>
						<!-- right -->
						<view class="ready-right">
							<!-- center -->
							<view class="ready-content">
								<view class="f16">
									{{item.goodsName}}
								</view>
								<view class="mt10">
									<text>发放数量：</text>
									<text>{{item.haveSendNum}}</text>
								</view>
								<view class="mt10">
									<text>发放人：</text>
									<text>{{item.sendEmployeeName}}</text>
								</view>
								<view class="mt10">
									<text>发放时间：</text>
									<text>{{item.sendTime}}</text>
								</view>
							</view>
							<view class="ready-icon">
								<text class="lg text-gray cuIcon-right"></text>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view v-if="!isHaves">
				<view class="no-data">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src1: '../../../../static/img/u4934.png',
				src2: "../../../../static/wupinfafang.png",
				tabIndex: 0,
				tabList: ['待发物品', '已发物品'],
				readyList: [], //待发列表
				issuedList: [], //已发列表
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				param1: {
					page: 1,
					size: 10,
					teamId: uni.getStorageSync("teamId")
				},
				param2: {
					page: 1,
					size: 10,
					teamId: uni.getStorageSync("teamId")
				},
				total1: '', //待发放总页
				total2: '', //已发放总页
				isHave: true,
				isHaves: true
			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `top:${CustomBar}px;`;
				return style
			}
		},
		onReachBottom() {
			if (this.param1.page < this.total1) {
				this.param1.page++;
				this.waiting();
			}
			if (this.param2.page < this.total2) {
				this.param2.page++;
				this.issued();
			}
		},
		onShow() {
			if(this.readyList.length>0){
				this.param1.page = 1;
				this.readyList = []
				this.waiting();
			}
		},
		onLoad() {
			this.waiting();
		},
		methods: {
			// 一发放
			issued() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$http("/warehouse-service/outSendLog/listPage", "get", this.param2).then((res) => {
					if (res.data.code == 200) {
						this.isHaves = true;
						this.issuedList = this.issuedList.concat(res.data.data.records);
						if ( this.issuedList.length == 0) {
							this.isHaves = false;
						}
						if ( this.issuedList.length != 0) {
							this.isHaves = true;
						}
						this.total2 = res.data.data.pages;
						uni.hideLoading();
					}
				});
			},
			changTab(index) {
				this.tabIndex = index;
				switch (index) {
					case 0:
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('待发物品', 1);
						}
						this.param1.page = 1;
						this.readyList = [];
						this.waiting();
						break;
					case 1:
						if (this.$store.state.state && this.$store.state.isphone) {
							getApp().globalData.TTSSpeaker.stop();
							getApp().globalData.TTSSpeaker.speak('已发物品', 1);
						}
						this.param2.page = 1;
						this.issuedList = [];
						this.issued();
						break;
				}
			},
			// 待发放
			waiting() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$http("/warehouse-service/outSend/listPageForApp", "get", this.param1).then((res) => {
					if (res.data.code == 200) {
						this.isHave = true;
						this.readyList = res.data.data.records.concat(this.readyList)
						this.total1 = res.data.data.pages;
						if ( this.readyList.length == 0) {
							this.isHave = false;
						}
						if (this.readyList.length != 0) {
							this.isHave = true;
						}
						uni.hideLoading();
					}
				});
			},
			confirm(item) {
				if (this.$store.state.state && this.$store.state.isphone) {
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak('确认发放', 1);
				}
				uni.navigateTo({
					url: '../submit/submit?item=' + JSON.stringify(item)
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: '../detail/detail?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './list.scss';
</style>
